<template>
  <div class="main" style="height: 100%;">
    <div style="display: flex;justify-content: space-between;align-items: center;">
      <div style="display: flex;">
        <el-date-picker size="small" style="margin-right:  10px;" v-model="params.time" type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-input size="small" prefix-icon="el-icon-search" style="width: 300px;margin-right:  10px;"
                  v-model="params.storeName"
                  clearable
                  placeholder="请输入店铺名称"></el-input>
        <el-select size="small" style="width: 200px;margin-right: 10px;" clearable v-model="params.area" filterable
                   placeholder="请选择省份">
          <el-option v-for="item in provinceOptions" :key="item.area" :label="item.areaName"
                     :value="item.area">
          </el-option>
        </el-select>
        <el-button size="small" type="primary" @click="getList">查询</el-button>
      </div>
      <div>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <el-table :data="dataList" :height="maxHeight" v-loading='loading' element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" tripe border tooltip-effect="dark" :headerCellStyle="{
                    'textAlign': 'center',
                    'fontWeight': 400,
                    'background': '#66b1ff',
                    'color': 'white',
                }" :cellStyle="{
                    'textAlign': 'center',
                    'fontSize': '12px'
                }">
        <el-table-column label="门店名称" min-width="200px">
          <template slot-scope="scope">
            <el-link
              style="text-decoration: none;border-bottom: solid 1px #409EFF;color: #409EFF"
              @click="openDialog(scope.row)">
              {{ scope.row.order.storeName }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="区域" min-width="100px"></el-table-column>
        <el-table-column prop="order.deliveryDate" label="发货日期" min-width="100px"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="状态">

          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">已完结</el-tag>
            <el-tag v-else type="danger">未完结</el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column label="操作" fixed="right" min-width="100px">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-link style='font-size:12px' type="success" @click="confirmOrder(scope.row.id)"-->
        <!--                     v-if='scope.row.status !== 1'>确认完成-->
        <!--            </el-link>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
    </div>
    <div style="padding-top: 20px;">
      <el-pagination style="border-top:1px solid #eee;padding-top: 20px;" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="params.pageNumber" :page-sizes="[20, 30, 50]"
                     :page-size="20" layout="total, sizes, prev, pager, next, jumper" align="right"
                     :total="params.totalCount">
      </el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="ledgerStatus" width="100%"
               center
               :show-close="false"
               :before-close="handleClose">
      <div class="feeType">
        <div :class="chooseDateIndex==item.financeId?'active':''" class="typeList" @click="chooseType(item.financeId)"
             v-for="item in typeList"><span>{{ item.financeName }}</span><span>{{ item.financeTotal }}</span>
        </div>
      </div>
      <div class="feeTable">
        <el-table :data="feeData"
                  style="margin-top: 10px"
                  :headerCellStyle="{
                    'textAlign': 'center',
                    'fontWeight': 400,
                    'background': '#66b1ff',
                    'color': 'white',
                }" :cellStyle="{
                    'textAlign': 'center',
                    'fontSize': '12px'
                }">
          <el-table-column prop="id" label="单号"></el-table-column>
          <el-table-column prop="matter" label="费用说明"></el-table-column>
          <el-table-column prop="money" label="花费"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="proof" label="凭证"></el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
                      <el-button @click="ledgerStatus = false">取 消</el-button>
                      <el-button type="primary" @click="submitCreateForm">确 定</el-button>
                  </span>
    </el-dialog>
  </div>

</template>

<script>
import upload from '@/RayComponents/upload.vue'
import _ from "lodash";
import _debounce from 'lodash/debounce';
import dayjs from 'dayjs';
import Decimal from 'decimal.js';

export default {
  name: "StoreLedger",
  components: {
    upload
  },
  data() {
    return {
      apiName: "newAreaLedgerList",
      params: {
        pageNumber: 1,
        pageSize: 20,
        time: '',
        storeName: '',
        area: '',
      },
      loading: false,
      totalCount: 0,
      chooseDateIndex: 1,
      dialogTitle: "",
      ledgerStatus: false,
      maxHeight: 0,
      typeOptions: [],
      typeList: [],
      createForm: {
        typeId: '',
        provinceId: '',
        voucher: '',
        price: '',
        remark: ''
      },
      orderId:"",
      provinceOptions: [],
      dataList: [],
      feeData: [],

    };
  },
  watch: {},
  mounted() {
    this.getCostType();
    this.getProvince();
    this.getList();
    this.$nextTick(() => {
      this.maxHeight = window.innerHeight - 240;
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 240;
      })
    }
  },
  methods: {
    confirmOrder(val) {
      this.$api.storeLedgerUpdateStoreLedgerStatus({ id: val }).then(res => {
        this.getList();
      })
    },
    costChange: _.debounce(function (val, type) {
      if (val.status == 1) {
        this.$message.error('当前记录已完结，不可修改!');
        return;
      }
      let pattern = /^\d+(\.\d{1,2})?$/;
      let params = {
        id: val.id,
      }
      if (type == 'huolala') {
        if (!pattern.test(val.huolalaVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.huolala = Decimal(val.huolala).add(Decimal(val.huolalaVal)).toNumber();
      }
      if (type == 'huolalaShevel') {
        if (!pattern.test(val.huolalaShevelVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.huolalaShevel = Decimal(val.huolalaShevel).add(Decimal(val.huolalaShevelVal)).toNumber();
      }
      if (type == 'unload') {
        if (!pattern.test(val.unloadVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.unload = Decimal(val.unload).add(Decimal(val.unloadVal)).toNumber();
      }
      if (type == 'installationCosts') {
        if (!pattern.test(val.installationCostsVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.installationCosts = Decimal(val.installationCosts).add(Decimal(val.installationCostsVal)).toNumber();
      }
      if (type == 'secondVisit') {
        if (!pattern.test(val.secondVisitVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.secondVisit = Decimal(val.secondVisit).add(Decimal(val.secondVisitVal)).toNumber();
      }
      if (type == 'thirdVisit') {
        if (!pattern.test(val.thirdVisitVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.thirdVisit = Decimal(val.thirdVisit).add(Decimal(val.thirdVisitVal)).toNumber();
      }
      if (type == 'fourthVisit') {
        if (!pattern.test(val.fourthVisitVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.fourthVisit = Decimal(val.fourthVisit).add(Decimal(val.fourthVisitVal)).toNumber();
      }
      if (type == 'changeShevel') {
        if (!pattern.test(val.changeShevelVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.changeShevel = Decimal(val.changeShevel).add(Decimal(val.changeShevelVal)).toNumber();
      }
      if (type == 'userRefunds') {
        if (!pattern.test(val.userRefundsVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.userRefunds = Decimal(val.userRefunds).add(Decimal(val.userRefundsVal)).toNumber();
      }
      if (type == 'factory') {
        if (!pattern.test(val.factoryVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.factory = Decimal(val.factory).add(Decimal(val.factoryVal)).toNumber();
      }
      if (type == 'freight') {
        if (!pattern.test(val.freightVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.freight = Decimal(val.freight).add(Decimal(val.freightVal)).toNumber();
      }

      if (type == 'damage') {
        if (!pattern.test(val.damageVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.damage = Decimal(val.damage).add(Decimal(val.damageVal)).toNumber();
      }
      if (type == 'accommodationFee') {
        if (!pattern.test(val.accommodationFeeVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.accommodationFee = Decimal(val.accommodationFee).add(Decimal(val.accommodationFeeVal)).toNumber();
      }
      if (type == 'loadingTruckFee') {
        if (!pattern.test(val.loadingTruckFeeVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.loadingTruckFee = Decimal(val.loadingTruckFee).add(Decimal(val.loadingTruckFeeVal)).toNumber();
      }
      if (type == 'usingFoodFee') {
        if (!pattern.test(val.usingFoodFeeVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.usingFoodFee = Decimal(val.usingFoodFee).add(Decimal(val.usingFoodFeeVal)).toNumber();
      }
      if (type == 'purchaseFee') {
        if (!pattern.test(val.purchaseFeeVal)) {
          this.$message.error('请填写合法金额!');
          return;
        }
        params.purchaseFee = Decimal(val.purchaseFee).add(Decimal(val.purchaseFeeVal)).toNumber();
      }


      this.$api.storeLedgerUpdateStoreLedger(params).then(res => {
        this.getList();
      })
    }, 10),
    getList() {
      this.loading = true;
      let params = {
        pageNumber: this.params.pageNumber,
        pageSize: this.params.pageSize,
        startTime: this.params.time ? dayjs(this.params.time[0]).format("YYYY-MM-DD") : '',
        endTime: this.params.time ? dayjs(this.params.time[1]).format("YYYY-MM-DD") : '',
        area: this.params.area,
        storeName: this.params.storeName
      }
      this.$api.storeLedgerStoreLedgerList(params).then(res => {
        this.dataList = res.data;
        this.params.totalCount = res.total
        this.loading = false;
      })
    },
    getProvince() {
      this.$api.areaLedgerAreaList().then(res => {
        this.provinceOptions = res;
      })
    },
    getCostType() {
      this.$api.areaLedgerFyTypeList().then(res => {
        this.typeOptions = res;
      })
    },
    submitCreateForm() {
      for (let i in this.createForm) {
        if (this.createForm[i] == '') {
          this.$message.error('请检查信息!');
          return;
        }
      }
      this.ledgerStatus = false;
    },
    handleSizeChange(e) {
      this.params.pageSize = e;
      this.getList()
    },
    handleCurrentChange(e) {
      this.params.pageNumber = e;
      this.getList()
    },
    openDialog(row) {
      this.dialogTitle = row.order.storeName
      this.ledgerStatus = true
      this.orderId = row.id
      this.$api.storeLedgerGetFinanceOneLevelTypeDto({ orderId: row.id }).then(res => {
        this.typeList = res
      })
      this.chooseType(this.chooseDateIndex)
    },
    handleClose() {

    },
    chooseType(val) {
      this.chooseDateIndex = val
      this.$api.storeLedgerSelectFinanceDetailsByFinanceId({ financeId: val,orderId: this.orderId }).then(res => {
        this.feeData = res
      })
    }
  }
};
</script>

<style lang="less" scoped>
.amountContainer {
  width: 100%;
  text-align: center;
}

.amountContainer > div:nth-child(1) {
  margin-bottom: 10px;
}

/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .center {
  border-radius: 20px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.feeType {
  display: flex;
  justify-content: center;
}

.typeList {
  width: 150px;
  height: 60px;
  color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  background: linear-gradient(to left, #b3d8ff, #b3d8ff) left top no-repeat,
  linear-gradient(to bottom, #b3d8ff, #b3d8ff) left top no-repeat,
  linear-gradient(to left, #b3d8ff, #b3d8ff) right top no-repeat,
  linear-gradient(to bottom, #b3d8ff, #b3d8ff) right top no-repeat,
  linear-gradient(to left, #b3d8ff, #b3d8ff) left bottom no-repeat,
  linear-gradient(to bottom, #b3d8ff, #b3d8ff) left bottom no-repeat,
  linear-gradient(to left, #b3d8ff, #b3d8ff) right bottom no-repeat,
  linear-gradient(to left, #b3d8ff, #b3d8ff) right bottom no-repeat;
  background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;

  span {
    cursor: default;
  }
}

.active {
  box-shadow: inset 0 0 16px 0 #66b1ff;
  font-size: 16px;
  font-weight: bolder;
}
</style>
